<template>

    <div class="other_bar_wrap">
        <el-tooltip content="全屏" placement="bottom">
            <el-button @click="handleFullscreen()" type="text" size="medium" icon="el-icon-full-screen"></el-button>
        </el-tooltip>
        <el-tooltip content="刷新" placement="bottom">
            <el-button @click="handleReload()" type="text" size="medium" icon="el-icon-refresh-right"></el-button>
        </el-tooltip>
        <el-tooltip content="隔行变色" placement="bottom">
            <el-button @click="handleStripe" type="text" size="medium" icon="vue-icon-gehangbianse"></el-button>
        </el-tooltip>

        <!-- 显示/隐藏列 -->
        <el-tooltip content="显示/隐藏列" placement="bottom" class="ml10">
            <el-popover placement="bottom-start" trigger="click">
                <el-button slot="reference" type="text" size="medium" icon="el-icon-s-operation"></el-button>
                <div class="isHideCol_wrap">
                    <div class="title">显示/隐藏列</div>
                    <div class="checkall">
                        <el-checkbox v-model="check" @change="handleCheckAllChange">全选</el-checkbox>
                    </div>
                </div>
                <div class="check_wrap">
                    <el-row>
                        <el-col :span="8" v-for="(item, index) in columnList" :key="index" class="mb10">
                            <el-checkbox v-model="item.show"> {{item.label}} </el-checkbox>
                        </el-col>
                    </el-row>
                </div>
            </el-popover>
        </el-tooltip>
    </div>

</template>

<script>
export default {
    name: 'TableTools',
    props: {
        columnList: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            check: true
        }
    },

    created() {
    },

    mounted() {
        this.$nextTick(() => {
        })
    },

    methods: {
        handleReload() {
            this.$emit('handleReload')
        },

        handleFullscreen() {
            this.$emit('handleFullscreen')
        },

        handleStripe() {
            this.$emit('handleStripe')
        },

        handleCheckAllChange(val) {
            this.$emit('handleCheckAllChange', val)
        }
    }

}
</script>

<style lang="scss" scoped>

</style>
